React 教程第十二篇 —— Redux 跨组件通信入门之 combineReducers

结构

• component1

  • actions.js
  • reducer.js
  • component1.js

• component2

  • actions.js
  • reducer.js
  • component.js

• redux

  • store.js

组件 Component1

action.js

export default {
    increment(){
        return {
            type: "+"
        }
    },
    decrement(){
        return {
            type: '-'
        }
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import React, {Component} from 'react'
import Actions from './actions'
import Reducer from './reducer'

import store from '../../redux/configStore'

import Component2 from '../cp2/cp2'

export default class Component1 extends Component{
    constructor(props){
        super(props);
        this.state = {count: 0}
    }
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState().cp1
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp1-{store.getState().cp1}</h3>
                <input type="button" value="increment" onClick={this.increment}/>
                <Component2 />
            </div>
        )
    }
}

组件 component2

action.js

export default {
    increment(){
        return {
            type: "+"
        }
    },
    decrement(){
        return {
            type: '-'
        }
    }
}

reducer.js

export default (state = 0, action) => {
    switch(action.type){
        case '+':
            return state + 1;
        case '-':
            return state - 1;
        default:
            return state;
    }
}

component.js

import React, {Component} from 'react'
import Actions from './actions'
import Reducer from './reducer'

import store from '../../redux/configStore'

export default class Component2 extends Component{
    increment = () => {
        store.dispatch(Actions.increment());
        this.setState({
            count: store.getState().cp1
        })
    }
    
    render(){
        return (
            <div>
                <h3>component-cp2-{store.getState().cp2}</h3>
            </div>
        )
    }
}

store.js

import {createStore} from 'redux';
import { combineReducers } from 'redux';
import cp1 from '../components/cp1/reducer'
import cp2 from '../components/cp2/reducer'

const rootReducer = combineReducers({
    cp1,
    cp2
});

const store = createStore(rootReducer)

export default store;

小结

通过共同调用store已实现两个组件之间的通信

• 多个组件之间，每个组件都有单独的actions和reducer
• 多个组件之间的reducer通过redux.combineReducers来进行合并得到一个rootReducer，最后用createStore来完成store的创建生成。
• 在 View 层通过store.getState()得到的是rootReducer后的对象{cp1: 0, cp2: 0}
• store.dispath会同时改变rootReducer里面的属性cp1和cp2，因为触发了reducer，而且两个action.type都是一样的，所以同时修改
• 如果想做到单独修改rootReducer，则需要变改不同组件action.type
• 为了action.type能统一管理，可以派生出多一个层constants，后面的案例会用到这个层